<template>
  <div class="op-group">
    <div class="op-title">近邻分析</div>
    <div class="option-item" :class="{ active: bufferDetailVisible }">
      <!-- 近邻查询 -->
      <div class="detail-panel">
        <!-- 快速计算 -->
        <div class="sub-item">
          <span class="check-item">近邻查询</span>
          <div v-if="!bufferDetailVisible" class="check-item-btn">
            <a-button class="op-btn" size="small" @click="showDetail"
              >编辑</a-button
            >
            <a-button
              :disabled="checkParams"
              class="op-btn-sub"
              type="primary"
              size="small"
              @click="doOption"
              >确定</a-button
            >
          </div>
        </div>
        <!-- 参数配置 -->
        <div v-if="bufferDetailVisible" class="analysis-detail">
          <div class="prompt-information">
            <span
              class="prompt-text"
              title="注：计算并显示目标图层中距离当前要素最近的指定数量要素"
              >注：计算并显示目标图层中距离当前要素最近的指定数量要素</span
            >
            <a-popover
              :overlay-class-name="'gis-analysis-tool-help'"
              placement="topRight"
            >
              <template slot="content">
                <div class="help-popover-title">近邻查询</div>
                <div class="help-popover-text">
                  选中当前图层中的要素，指定选取要素数量n，计算目标图层中距离选中要素最近的n个要素，并将这些要素保存为一个新图层。
                </div>
              </template>
              <div class="prompt-help">
                <a-icon-font type="iconbangzhu" />
              </div>
            </a-popover>
          </div>
          <!-- 参数 -->
          <a-row :gutter="[0, 10]">
            <a-col :span="6" class="required-item">当前图层:</a-col>
            <a-col :span="18">
              {{ selectLayer ? selectLayer.name : '-- 请选择图层 --' }}
            </a-col>
          </a-row>

          <a-row :gutter="[0, 10]">
            <a-col :span="6" class="required-item">目标图层:</a-col>
            <a-col :span="18">
              <!-- 下拉选择 -->
              <a-select
                v-model="targetLayerId"
                style="width: 100%;"
                size="small"
              >
                <a-select-option
                  v-for="layer in targetLayerOptions"
                  :key="layer.id"
                  :value="layer.id"
                  >{{ layer.name }}</a-select-option
                >
              </a-select>
            </a-col>
          </a-row>
          <a-row :gutter="[0, 10]">
            <a-col :span="7" class="required-item">最近要素个数:</a-col>
            <a-col :span="17">
              <a-input-number
                v-model="neighbors"
                :min="1"
                :step="1"
                size="small"
              />
            </a-col>
          </a-row>
          <a-row :gutter="[0, 10]">
            <a-col :span="6" class="required-item">生成图层:</a-col>
            <a-col :span="18">
              <a-input
                v-model="generateLayerName"
                size="small"
                placeholder="请输入"
              ></a-input>
            </a-col>
          </a-row>
          <div class="button-row">
            <a-button class="op-btn-sub" size="small" @click="cancel"
              >取消</a-button
            >
            <a-button
              :disabled="checkParams"
              :loading="loading"
              class="op-btn-sub"
              type="primary"
              size="small"
              @click="doOption"
              >确定</a-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 近邻分析：近邻查询
 * @author Hou Jinhui
 */
import { Component, Vue, Watch } from 'vue-property-decorator'
import GisStore from '@/store/modules/gis'

@Component({
  components: {},
})
export default class NearestNeighborAnalysis extends Vue {
  public bufferDetailVisible: boolean = false // 参数详情
  public get selectLayer() {
    return GisStore.selectLayer
  }

  public targetLayerId: any = null // 目标图层
  public get targetLayerOptions() {
    return GisStore.layerList
  }
  public neighbors: number = 1 // 最近要素个数
  public generateLayerName: string = '' // 近邻查询结果生成新图层名称
  // 选择的要素
  public get selectFeatureId() {
    return GisStore.tableSelectRowDatas.map(
      (feature: any) => feature._record_id_
    )
  }
  public loading: boolean = false

  @Watch('selectLayer')
  public onSelectLayer(layer: any) {
    if (layer) {
      this.generateLayerName = `${layer.name}-近邻查询图层1`
    } else {
      this.generateLayerName = '近邻查询图层1'
    }
  }

  public mounted() {
    this.generateLayerName = this.selectLayer
      ? `${this.selectLayer.name}-近邻查询图层1`
      : '近邻查询图层1'
  }

  public get projectId() {
    return GisStore.projectId
  }
  public get tabId() {
    return GisStore.currentTabId
  }

  public showDetail() {
    this.bufferDetailVisible = true
  }

  //  点击取消，关闭推荐面板
  public cancel() {
    this.bufferDetailVisible = false
    this.loading = false
  }

  public get checkParams() {
    return (
      !this.selectLayer?.id ||
      !this.generateLayerName.trim() ||
      !this.targetLayerId ||
      !this.neighbors
    )
  }

  /**
   * 编辑确认
   */
  public async doOption() {
    console.log(this.selectFeatureId, 'this.selectFeatureId')
    if (this.selectFeatureId.length !== 1) {
      this.$message.warning('请选择当前图层1个要素！')
      return
    }
    const parameters: any = {
      projectId: this.projectId,
      tabId: this.tabId,
      currentLayerId: this.selectLayer?.id,
      targetLayerId: this.targetLayerId,
      elementId: this.selectFeatureId[0],
      neighbors: this.neighbors,
      setLayerName: this.generateLayerName.trim(),
    }
    GisStore.setMapLoading(true)
    this.loading = true
    try {
      const response = await GisStore.nearSearchSaveLayer(parameters)
      if (response.data.code === 100) {
        const layers: any = response.data.result
        const sortByOrder: any[] = layers.sort(
          (layer1: any, layer2: any) => layer1.order - layer2.order
        )
        GisStore.setFitBoundsAfterCreateNewLayer(false)
        this.$message.success(`操作成功，已生成新图层${sortByOrder[0].name}`)
      } else {
        this.$message.error(response.data.message)
      }
    } finally {
      GisStore.setMapLoading(false)
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url('analysis-tool.less');
@import '@/components/gis/gis-analysis/analysis-tool/analysis-tool.less';
</style>

<style lang="less">
// 用户引导 step popover
.gis-analysis-tool-help {
  user-select: none;
  width: 248px !important;

  .help-popover-title {
    color: #5d637e;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.3px;
  }

  .help-popover-text {
    color: #5d637e;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.12px;
  }
}
</style>
